<template>
    <div class="hr-gwsz">
      <Layout :style="{padding: '0 24px 24px'}">
        <Breadcrumb :style="{margin: '24px 0'}">
          <BreadcrumbItem><a href="javascript:void(0)" @click="jump('/index')">首页</a></BreadcrumbItem>
          <BreadcrumbItem>人力资源管理</BreadcrumbItem>
          <BreadcrumbItem>组织管理</BreadcrumbItem>
          <BreadcrumbItem>岗位设置</BreadcrumbItem>
        </Breadcrumb>
        <Content id="tal" :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
          <div class="hr-header" ghost>
            <div class="hr-header-search">
              <span>搜索条件：</span>
              <Input v-model="search" placeholder="请输入岗位名称..." style="width: 300px"></Input>
              <Button @click="toSearch"><Icon type="md-search" />搜索</Button>
            </div>
            <Button @click="addDrawer=true"><Icon type="md-add" />新增</Button>
            <Button @click="toRefresh"><Icon type="md-sync" />刷新</Button>
          </div>
          <div class="hr-content" style="width: 100%;height: 72vh;overflow: hidden;margin-top: 1%">
            <div style="overflow-y:scroll;width: 101.6%;height: 100%;margin-right: -20px">
                <Table :loading="loading" :height="666"   :columns="tb_columns" :data="postSet_list" size="small"></Table>
                <Page :total="postSet_total" :current="postSet_current_page" :page-size="postSet_page_size" @on-change="onChange" @on-page-size-change="onPageSizeChange" show-total show-sizer size="small" style="float:right;margin-top:12px"/>
            </div>
          </div>
        </Content>
      </Layout>
      <Drawer title="新增岗位" :closable="false" v-model="addDrawer" width="30" :mask-closable="false">
        <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="100">
          <FormItem label="岗位名称：" prop="postName">
            <Input v-model="addForm.postName" placeholder="请输入岗位名称..."></Input>
          </FormItem>
          <FormItem label="岗位福利：" prop="postWelfare">
            <Input  type="textarea" :rows="4"  v-model="addForm.postWelfare" placeholder="请输入岗位福利..."></Input>
          </FormItem>
          <FormItem label="职能要求：" prop="postFunction">
            <Input type="textarea" :rows="8"  v-model="addForm.postFunction" placeholder="请输入职能要求..."></Input>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit('addForm')">提交</Button>
          <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
      <Drawer title="更新岗位信息" :closable="false" v-model="updateDrawer" width="30" :mask-closable="false">
        <Form ref="updateForm" :model="addForm" :rules="addRuleVal" :label-width="100">
          <FormItem label="岗位名称：" prop="postName">
            <Input v-model="addForm.postName" placeholder="请输入岗位名称..."></Input>
          </FormItem>
          <FormItem label="岗位福利：" prop="postWelfare">
            <Input  type="textarea" :rows="4"  v-model="addForm.postWelfare" placeholder="请输入岗位福利..."></Input>
          </FormItem>
          <FormItem label="职能要求：" prop="postFunction">
            <Input type="textarea" :rows="8"  v-model="addForm.postFunction" placeholder="请输入职能要求..."></Input>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit2('updateForm')">提交</Button>
          <Button @click="handleReset('updateForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
    </div>

</template>

<script>
  import {mapGetters,mapActions} from 'vuex';
  import {toGet,toPost} from "../../utils/MyAxios";
  export default {
        name: "hr-gwsz",
        data() {
            return {
              tableHeight:300,
              loading:false,
              addForm:{},
              showPwd:false,
              switch1:false,
              updateDrawer:false,
              addRuleVal:{
                postName: [
                  { required: true, message: '请输入岗位名称', trigger: 'blur' }
                ],
                postWelfare: [
                  { required: true, message: '请输入岗位福利', trigger: 'blur' }
                ],
                postFunction: [
                  { required: true, message: '请输入职能要求', trigger: 'blur' }
                ],
              },
              addDrawer:false,
              search:'',
              tb_columns: [
                {
                  title: '岗位ID',
                  key: 'id',
                  align: 'center'
                },
                {
                  title: '岗位名称',
                  key: 'postName',
                  align: 'center'
                },
                {
                  title: '岗位福利',
                  key: 'postWelfare',
                  align: 'center',
                  tooltip:true
                },
                {
                  title: '职能要求',
                  key: 'postFunction',
                  align: 'center',
                  tooltip:true
                },
                {
                  title: '操作',
                  align: 'center',
                  render: (h, params) => {
                    return h('div', [
                        h('Button', {
                          props: {
                            icon: 'md-create',
                            size: 'small'
                          },
                          style: {
                            color: 'black',
                          },
                          on: {
                            click: () => {
                              this.toUpdate(params.row.id)
                            }
                          }
                        }),
                        h('Button', {
                          props: {
                            icon: 'md-trash',
                            size: 'small'
                          },
                          style: {
                            color: 'black',
                          },
                          on: {
                            click: () => {
                              this.toDel(params.row.id)
                            }
                          }
                        })
                    ]);
                  }
                }
              ],
            }
        },
        computed: {
          ...mapGetters(['postSet_list','postSet_total','postSet_current_page','postSet_page_size']),
        },
        methods: {
          ...mapActions(['getPostSetList']),
          toRefresh(){
            this.getPostSetList({
              'search':this.search,
              'currentPage':this.postSet_current_page,
              'pageSize':this.postSet_page_size
            });
          },
          handleSubmit (name) {
            this.$refs[name].validate((valid) => {
              if (valid) {
                  this.loading=true;
                  let params = {
                    postName:this.addForm.postName,
                    postWelfare: this.addForm.postWelfare,
                    postFunction :this.addForm.postFunction,
                  };
                  toPost('/human-resources/hr/postset/add',params)
                    .then(res=>{
                      if (res.resultCode === 0) {
                        this.$Notice.success({
                          title: '新增岗位成功'
                        });
                        this.$refs[name].resetFields();
                        this.toRefresh();
                        this.addDrawer=false;
                      }else{
                        this.$Notice.error({
                          title: '新增岗位失败',
                          desc: '服务器发生未知错误'
                        })
                      }
                    });
                  this.loading=false;
              }
            })
          },
          handleSubmit2 (name) {
            this.$refs[name].validate((valid) => {
              if (valid) {
                  this.loading=true;
                  let params = {
                    id:this.addForm.id,
                    postName:this.addForm.postName,
                    postWelfare: this.addForm.postWelfare,
                    postFunction :this.addForm.postFunction,
                  };
                  toPost('/human-resources/hr/postset/update',params)
                    .then(res=>{
                      if (res.resultCode === 0) {
                        this.$Notice.success({
                          title: '修改岗位信息成功'
                        });
                        this.$refs[name].resetFields();
                        this.toRefresh();
                        this.updateDrawer=false;
                      }else{
                        this.$Notice.error({
                          title: '修改岗位信息失败',
                          desc: '服务器发生未知错误'
                        })
                      }
                    });
                  this.loading=false;
              }
            })
          },
          handleReset (name) {
            this.addDrawer=false;
            this.updateDrawer=false;
            this.$refs[name].resetFields();
          },
          onChange(currentPage){
            this.getPostSetList({
              'search':this.search,
              'currentPage':currentPage*1,
              'pageSize':this.postSet_page_size
            });
          },
          jump(e){
            this.$router.push(e);
          },
          onPageSizeChange(pageSize){
            this.getPostSetList({
              'search':this.search,
              'currentPage':this.postSet_current_page,
              'pageSize':pageSize*1
            });
          },
          toSearch(){
            this.getPostSetList({
              'search':this.search,
              'currentPage':this.postSet_current_page,
              'pageSize':this.postSet_page_size
            });
          },
          toUpdate(id){
            toGet('/human-resources/hr/postset/queryOne/'+id)
              .then(res=>{
                if (res.resultCode === 0) {
                  this.addForm=res.data;
                  this.updateDrawer=true;
                }else{
                  this.$Notice.warning({
                    title: '获取岗位信息失败',
                    desc: '服务器发生未知错误'
                  });
                }
              });

          },
          toDel(id){
            swal({
              title: "您确定删除该岗位吗?",
              text: "删除该岗位后，系统将删除该岗位的所有信息!",
              icon: "warning",
              buttons: ["容我再想想!", "确认删除!"],
              dangerMode: true,
            })
              .then((willDelete) => {
                if (willDelete) {
                  toGet('/human-resources/hr/postset/delete/'+id)
                    .then(res=>{
                      if (res.resultCode === 0) {
                        swal("删除成功!", {
                          icon: "success",
                        });
                        this.getPostSetList({
                          'search':this.search,
                          'currentPage':1,
                          'pageSize':20
                        });
                      }
                    })
                    .catch(error=>{
                      swal("删除失败!", {
                        icon: "error",
                      });
                    });
                }
              });
          }
        },
        mounted() {
          this.tableHeight=document.getElementById('tal').offsetHeight*.8;
          this.getPostSetList({
            'search':'',
            'currentPage':1,
            'pageSize':20
          })
        }
    }
</script>

<style lang="css" scoped>

</style>
